<template>
  <el-dialog v-model="editVisible" title="创建区段" width="500">
    <el-form
      :model="editLine"
      ref="form"
      :rules="rules"
      label-width="80px"
      :inline="false"
      v-if="editLine"
    >
      <el-form-item label="区段名称" prop="name">
        <el-input v-model="editLine.name"></el-input>
      </el-form-item>
      <el-form-item label="开始塔位" prop="start">
        <el-input v-model="editLine.start"></el-input>
      </el-form-item>
      <el-form-item label="结束塔位" prop="end">
        <el-input v-model="editLine.end"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">立即修改</el-button>
        <el-button @click="$emit('closed')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import useLineStore from "@/states/useLineStore";
import type { FormInstance, FormRules } from "element-plus";
import { reactive, ref } from "vue";

const editVisible = defineModel();
const { editLine } = defineProps<{
  editLine: LineDataInter | undefined;
}>();
const emit = defineEmits(["closed"]);

const lineStore = useLineStore();
const form = ref<FormInstance>();

const rules = reactive<FormRules<LineDataInter>>({
  name: [
    { required: true, message: "区段名称不能为空", trigger: "blur" },
    { min: 3, max: 10, message: "名称长度在3-10之间", trigger: "blur" },
  ],
  start: [{ required: true, message: "开始塔位不能为空", trigger: "blur" }],
  end: [{ required: true, message: "结束塔位不能为空", trigger: "blur" }],
});

async function onSubmit(formI: FormInstance | undefined) {
  if (!formI) return;
  await formI.validate(async (v: boolean) => {
    if (v) {
      // await lineStore.add({ ...editLine!, projId });
      await lineStore.update(editLine?.id!, {
        name: editLine!.name,
        start: editLine!.start,
        end: editLine!.end,
      });
      emit("closed");
    }
  });
}
</script>

<style></style>
